<script setup name="ShangBaoPage">
import { ref } from 'vue';
import useUserStore from '@/store/modules/user'
import { useRouter, useRoute } from 'vue-router';
import {listByUserId, del, shangBao, cheXiao,} from '@/api/system/dingdan.js';
const router = useRouter();
const route = useRoute();
const userStore = useUserStore()
const { proxy } = getCurrentInstance();

const activeName = ref('first');
const dingDanList = ref([]);
const tiJiaoList = ref([]);
const caoGaoList = ref([]);


async function getDingDanList(){
  let rsp = await listByUserId(userStore.id);
  dingDanList.value = rsp.data;

  for( let item of dingDanList.value){
    if(item.caoGao === 0){
      tiJiaoList.value.push(item);
    }
    if(item.caoGao === 1) {
      caoGaoList.value.push(item);
    }
  }
}

getDingDanList();

async function zuoFei(id){
  let rsp = await del(id);
  if(rsp.code === 200){
    proxy.$modal.msgSuccess("已作废");
  } else {
    proxy.$modal.msgWarning("作废失败！");
  }
  await getDingDanList();

}

async function onShangBao(id){
  let rsp = await shangBao(id);
  if(rsp.code === 200){
    proxy.$modal.msgSuccess("已上报");
  } else {
    proxy.$modal.msgWarning("上报失败！");
  }
  await getDingDanList();
}

function toShangBaoPage(){
  router.push({
    path: '/shangBaoPage',
  })
}


async function onCheXiao(row){
  let rsp = await cheXiao(row.id);
  if(rsp.coce === 200){
    if(rsp.code === 200){
      proxy.$modal.msgSuccess("已撤销");
    } else {
      proxy.$modal.msgWarning("撤销失败！");
    }
  }
}

function onXiuGai(row){
  console.log(row);
  if(row.list !=null){
    row.count = row.list.length;
    row.sum = 0;
    for(let item of row.list) {
      row.sum += item.buyCount*item.huoPinPrice;
    }
  }
  let params = {
      type: "modify",
      id: row.id,
      dangKouName: row.dangKouName,
      dangKouId: row.dangKouId,
      cangKuName: row.cangKuName,
      cangKuId: row.cangKuId,
      pinLeiId: row.pinLeiId,
      pinLeiName: row.pinLeiName,
      riQi: row.riQi,
      count: row.count,
      sum: row.sum,
      list: JSON.stringify(row.list)
  };

  router.push({name: "SelectCaiPin", query: params});
}

function toDangKouHomePage(){
  router.push({
    path: '/dangKouHomePage'
  });
}

function dateCut(date) {
  if(typeof date === 'undefined' || date === null || date.trim() === ""){
    return ""
  } else {
    return date.split("T")[0];
  }
}

function parseStatus(status){
  if(status === 0){
    return "审核中";
  } else if(status === 1) {
    return "已通过";
  } else if(status === 2) {
    return "已驳回";
  } else if(status === 3) {
    return "已撤销";
  } else {
    return "未知状态["+status+"]";
  }
}
</script>

<template>
  <div>
    <el-tabs v-model="activeName"  stretch class="custom-tabs" style="height: 100vh;">
      <el-tab-pane label="未上报" name="first">
        <div>
          <el-scrollbar height="100%" style="margin-bottom: 100px;">
            <div class="ding-dan-list">
              <div class="ding-dan-item" v-for="item in caoGaoList">
                <el-card style="width: 100%">
                  <template #header>
                    <div class="card-header">
                      <span>订单号：</span><span>{{item.id}}</span>
                    </div>
                  </template>
                  <div>
                    <el-text size="large"><div class="info-line"><span>档口：</span><span>{{item.dangKouName}}</span></div></el-text>
                    <el-text size="large"><div class="info-line"><span>仓库：</span><span>{{item.cangKuName}}</span></div></el-text>
                    <el-text size="large"><div class="info-line"><span>供货日期：</span><span>{{dateCut(item.riQi)}}</span></div></el-text>
                    <el-text size="large"><div class="info-line"><span>供货时间：</span><span>{{item.shiJian}}</span></div></el-text>
                    <div class="ding-dan-details" v-for="item2 in item.list">
                      <el-text size="large"><div >菜品：{{item2.huoPinName}}({{item2.huoPinId}})     数量：{{item2.buyCount}}</div></el-text>
                    </div>
                  </div>
                  <template #footer>
                    <div>
                      <el-button type="warning" @click="zuoFei(item.id)">作废</el-button>
                      <el-button type="success" @click="onShangBao(item.id)">立即上报</el-button>
                    </div>
                  </template>
                </el-card>
              </div>
            </div>
          </el-scrollbar>

          <div class="btn-line">
            <el-button type="primary" class="shang_bao_btn" style="" @click="toShangBaoPage">报计划</el-button>
            <div style="height: 10px;"></div>
            <el-button type="success" class="shang_bao_btn" style="" @click="toDangKouHomePage">回首页</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已上报" name="second">
        <div class="ding-dan-list">
          <div class="ding-dan-item" v-for="item in tiJiaoList">
            <el-card style="width: 100%">
              <template #header>
                <div class="card-header">
                  <span>订单号：</span><span>{{item.id}}</span>
                </div>
              </template>
              <div>
                <el-text size="large"><div class="info-line"><span>档口：</span><span>{{item.dangKouName}}</span></div></el-text>
                <el-text size="large"><div class="info-line"><span>仓库：</span><span>{{item.cangKuName}}</span></div></el-text>
                <el-text size="large"><div class="info-line"><span>供货日期：</span><span>{{dateCut(item.riQi)}}</span></div></el-text>
                <el-text size="large"><div class="info-line"><span>供货时间：</span><span>{{item.shiJian}}</span></div></el-text>
                <el-text size="large"><div class="info-line"><span>状态：</span><span>{{parseStatus(item.status)}}</span></div></el-text>
                <el-text size="large"><div class="info-line"><span>意见：</span><span>{{item.statusReason}}</span></div></el-text>
                <div class="ding-dan-details" v-for="item2 in item.list">
                  <el-text size="large"><div >菜品：{{item2.huoPinName}}({{item2.huoPinId}})     数量：{{item2.buyCount}}</div></el-text>
                </div>
              </div>
              <template #footer>
                <div v-if="item.status === 0">
                  <el-button type="warning" @click="onCheXiao(item)">撤销</el-button>
                  <el-button type="warning" @click="onXiuGai(item)">修改</el-button>
                </div>
              </template>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">

.custom-tabs .el-tabs__header {
  height: 100px;
}

.custom-tabs .el-tabs__nav-wrap::after {
  height: 100px;
}

.custom-tabs .el-tabs__item {
  height: 100px;
  line-height: 100px;
}

  .btn-line{
    position: fixed;
    bottom: 10px;

    .shang_bao_btn {
      font-size: larger;
      width: 98vw;
      margin: 0 1vw;
      height: 50px;
      border-radius: 30px;
    }
  }

  .ding-dan-list{

    padding: 5px;
    height: 100%;
    overflow-x: scroll;
    .ding-dan-item{
      margin-bottom: 20px;

      .info-line{
        margin: 5px;

      }

      .ding-dan-details{
        margin-left: 20px;
      }
    }
  }
</style>